<template>
	<div class="nearby">
		<h3 class="nearby__title">附近店铺</h3>
		<router-link v-for="item of nearbyList" :key="item._id" :to="`/shop/${item._id}`">
			<ShopInfo :item="item" />
		</router-link>
	</div>
</template>

<script>
	import { defineComponent, ref } from 'vue'
	import ShopInfo from '../../components/ShopInfo'
	import { get } from '../../utils/request'

	const ERR_OK = 0

	const useNearbyListEffect = () => {
		const nearbyList = ref([])
		const getNearByList = async() => {
			const result = await get('/api/shop/hot-list')
			if (result.errno === ERR_OK && result.data.length) {
				nearbyList.value = result.data
			}
		}
		return {
			nearbyList,
			getNearByList
		}
	}

	export default defineComponent({
		name: 'NearBy',
		components: { ShopInfo },
		setup() {
			const { nearbyList, getNearByList } = useNearbyListEffect()
			getNearByList()
			return {
				nearbyList
			}
		}
	})
</script>

<style lang="scss">
	@import '../../style/variable.scss';

	.nearby {
		&__title {
			margin: .16rem 0 .02rem 0;
			font-size: .18rem;
			color: $content-font-color;
			font-weight: normal;
		}
		a:last-child {
			.nearby__item {
				.nearby__content {
					border: none !important;
				}
			}
		}
		a {
			text-decoration: none;
		}
	}
</style>
